16-0 js
const App = {
data() {
return {
text: '小明',
}
},
methods: {
trigger: function(name) {
console.log(name, '此事件被觸發了')
}
}
};
Vue.createApp(App).mount('#app');
16-1 按鍵修飾符
keyAlias - 只當事件是從特定鍵觸發時才觸發。
別名修飾 - .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right
修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器 - .ctrl, .alt, .shift, .meta
<!-- 指定特定按鍵觸發 -->
<input type="text" class="form-control" v-model="text" @keyup.enter="trigger('enter')">
<input type="text" class="form-control" v-model="text" @keyup.shift.enter="trigger('shift + Enter')">
<input type="text" class="form-control" v-model="text" @keyup.h="trigger('h')">
16-2 滑鼠修飾符
.left 只當點擊鼠標左鍵時觸發。
.right 只當點擊鼠標右鍵時觸發。
.middle 只當點擊鼠標中鍵時觸發。
<!-- 未設定前滑鼠按哪個鍵都會觸發事件 -->
<span class="box" @click.right="trigger('right button')">
</span>
16-3 事件修飾符
.stop - 調用 event.stopPropagation()。
.prevent - 調用 event.preventDefault()。
.capture - 添加事件偵聽器時使用 capture 模式。
.self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
.once - 只觸發一次回調。
<!-- 防止預設事件,如跳開畫面(重新整理),直接產生新視窗 -->
<a href="#" @click.prevent="trigger('prevent')">加入 Prevent</a>
16-4 預設情境:冒泡事件
<!-- 點選最裡面按鍵後產生事件順序button->box->div 由內而外,監聽多元素或按鍵產生冒泡事件,阻止冒泡事件需使用stop、capture、self、once-->
<div class="p-3 bg-primary" @click="trigger('div')">
<span class="box d-flex align-items-center justify-content-center" @click="trigger('box')">
<button class="btn btn-outline-secondary" @click="trigger('button')">按我</button>
</span>
</div>
16-4-1 stopPropagation (防止向外尋找)
<!-- 僅不會觸發div區塊 -->
<div class="p-3 bg-primary" @click="trigger('div')">
<span class="box d-flex align-items-center justify-content-center" @click.stop="trigger('box')">
<button class="btn btn-outline-secondary" @click="trigger('button')">按我</button>
</span>
</div>
16-4-2 事件偵聽器時使用 capture 模式 (事件改為由外而內)
<!-- 點按鍵後產生事件為div->box->button -->
<div class="p-3 bg-primary" @click.capture="trigger('div')">
<span class="box d-flex align-items-center justify-content-center" @click.capture="trigger('box')">
<button class="btn btn-outline-secondary" @click.capture="trigger('button')">按我</button>
</span>
</div>
16-4-3 事件偵聽器時使用 self 模式 (只會觸發自己範圍內的)
<div class="p-3 bg-primary" @click.self="trigger('div')">
<span class="box d-flex align-items-center justify-content-center" @click.self="trigger('box')">
<button class="btn btn-outline-secondary" @click.self="trigger('button')">按我</button>
</span>
</div>
16-4-4 事件偵聽器只觸發一次 once
<div class="p-3 bg-primary" @click.once="trigger('div')">
<span class="box d-flex align-items-center justify-content-center" @click.once="trigger('box')">
<button class="btn btn-outline-secondary" @click.once="trigger('button')">按我</button>
</span>
</div>
.
知識點來源:六角課程
以上是今天所提供知識點如有誤,再請務必在下面留言~